<template>
	<div class="app-container">
		<!-- 二维码弹窗 -->
		<el-dialog title="二维码" :visible.sync="codeVisible" width="30%" center>
			<!-- <img src="http://static.jianxueedu.com.cn/part4/wechat.png" style="margin: auto;
		display: block;
		margin-bottom: 45px;"> -->
		<vue-qr :text="url" :margin="10" colorDark="#000" colorLight="#fff" :dotScale="1" :logoSrc="icon" :logoScale="0.2" :size="200" id="qrcode"></vue-qr>
	</el-dialog>

	<!-- dialog -->
		<!-- <el-dialog title="复制链接" :visible.sync="copyLink">
		  <div></div>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
		  </div>
		</el-dialog> -->
		
		
		<!-- 生成协议弹窗 -->
		<el-dialog title="生成协议" width="40%" @close="closeDialog" :visible.sync="centerDialogVisible">
			<div class="agreement-form">
				<el-form :model="agreementForm" ref="agreementForm" :rules="agreementRules" label-width="140px">
					<el-form-item label="客户经理" prop="manager_name">
						<el-input v-model="agreementForm.manager_name"></el-input>
					</el-form-item>
					<el-form-item label="成交用户" prop="user_name">
						<el-input v-model="agreementForm.user_name"></el-input>
					</el-form-item>
					<el-form-item label="班主任" prop="teacher">
						<el-input v-model="agreementForm.teacher"></el-input>
					</el-form-item>
					<el-form-item label="成交用户手机号" prop="user_mobile">
						<el-input v-model="agreementForm.user_mobile"></el-input>
					</el-form-item>
					<el-form-item label="成交用户身份证号" prop="id_card">
						<el-input v-model="agreementForm.id_card"></el-input>
					</el-form-item>
					<el-form-item label="商品分类" prop="selectDefault">
						<el-cascader v-model="selectDefault" :options="selectOptions" placeholder="请选择" :props="selectProps">
						</el-cascader>
					</el-form-item>
					
					<el-form-item label="成交方式" prop="pay_way">
						<el-input v-model="agreementForm.pay_way"></el-input>
						<!-- <el-select v-model="agreementForm.pay_way" placeholder="成交方式">
						  <el-option label="支付宝" value="支付宝"></el-option>
						  <el-option label="微信" value="微信"></el-option>
						  <el-option label="库分期" value="微信"></el-option>
						</el-select> -->
					</el-form-item>
					
					<el-form-item label="成交价格" prop="prices">
						<el-input type="number" v-model="agreementForm.prices"></el-input>
					</el-form-item>

					<el-form-item label="补充条款" prop="supplementary">
						<el-input v-model="agreementForm.supplementary"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" :disabled="isDisable" @click="agreementSubmit('agreementForm')">生成协议</el-button>
					</el-form-item>
				</el-form>
				
			</div>
		</el-dialog>

		<el-button type="primary" class="productagreement" @click="centerDialogVisible = true">生成协议</el-button>
		
		<!-- 帅选表单 -->
		<el-form :inline="true" :model="searchForm" ref="searchForm">
			<el-form-item label="成交用户手机号">
				<el-input type="number" v-model="searchForm.user_phone" placeholder="手机号"></el-input>
			</el-form-item>
			<el-form-item label="成交用户姓名">
				<el-input v-model="searchForm.user_name" placeholder="姓名"></el-input>
			</el-form-item>
			<el-form-item label="班主任">
				<el-input v-model="searchForm.teacher" placeholder="班主任"></el-input>
			</el-form-item>
			<el-form-item label="客户经理">
				<el-input v-model="searchForm.manager_name" placeholder="姓名"></el-input>
			</el-form-item></br>
			<el-form-item>
				<el-cascader clearable v-model="selectDefault" :options="selectOptions" placeholder="请选择" :props="selectProps">
				</el-cascader>
			</el-form-item>
			<el-form-item label="签署状态">
				<el-select v-model="searchForm.is_signed" placeholder="全部">
					<el-option label="全部" value="3"></el-option>
					<el-option label="未签署" value="1"></el-option>
					<el-option label="已签署" value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="创建时间">
				<el-date-picker
				v-model="searchForm.section"
				type="daterange"
				range-separator="至"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
				format="yyyy 年 MM 月 dd 日"
				value-format="yyyy-MM-dd">
			</el-date-picker>

		</el-form-item>
	</br>
	<el-form-item label="">
		<el-button type="primary" @click="searchSubmit()">搜索</el-button>
	</el-form-item>

</el-form>

<!-- table -->
<el-table :data="tableData" border style="width: 100%">
	<template slot="empty">暂无数据</template>
	<el-table-column prop="index" label="序号" width="50" type="index">
	</el-table-column>
	<el-table-column prop="user_name" label="成交用户" width="100">
	</el-table-column>
	<el-table-column prop="teacher" label="班主任" width="100">
	</el-table-column>
	<el-table-column prop="user_mobile" label="成交手机号" width="150">
	</el-table-column>
	<el-table-column prop="category_name" label="课程名称">
	</el-table-column>
	<el-table-column prop="manager_name" label="客户经理" width="100">
	</el-table-column>
	<el-table-column prop="prices" label="成交价格" width="100">
	</el-table-column>
	<el-table-column prop="create_time" label="创建时间">
	</el-table-column>
	<el-table-column label="签署状态" width="80">
		<template slot-scope="scope">
			<p v-if="scope.row.is_signed==2" class="greencolor">已签署</p>
			<p v-else class="redcolor">未签署</p>
		</template>
	</el-table-column>
	<el-table-column label="操作">
		<template slot-scope="scope">

			<div v-if="scope.row.is_signed==1">
				<el-button size="mini" type="primary" @click="doCopy(scope.row.copy_url)">复制链接</el-button>
				<!-- <input style="opacity: 0;" type="text" class="copy-link" v-model="copyLink" /> -->
				<el-button size="mini" type="primary" @click="getUrl(scope.row.copy_url)">二维码</el-button>
			</div>

			<div v-if="scope.row.is_signed==2">
				<a target="_blank" :href="scope.row.file_path">
					<el-button size="mini" type="primary">查看协议</el-button>
				</a>
			</div>
		</template>
	</el-table-column>
</el-table>
<!-- 分页 -->
<div class="page-box" v-if="tableData.length>0">
	<el-pagination 
	background 
	layout="prev, pager, next"
	:page-size="7"
	:current-page.sync="currPage"
	@current-change="handleCurrentChange" 
	:total="pagesTotal">
</el-pagination>
</div>


</div>
</template>

<script>
import {
	mapState
} from 'vuex'
import {
	parseTime
} from '@/utils'
import temRequest from '@/utils/tem-request'
import VueQr from 'vue-qr'
export default {
	components:{
		VueQr
	},
	data() {
		return {
				centerDialogVisible: false, //form弹窗
				codeVisible: false, //二维码弹窗
				url:"",
				icon:"http://xy.jxjiaoyu.net/backpage/img/qrlogo.png",
				selectProps: {
					expandTrigger: 'hover',
					value: 'id',
					label: 'name'
				},
				// 分类
				selectOptions: [],
				// selectDefault: [1,2,4],
				selectDefault: [],
				agreementForm: {
					manager_name: '',
					user_name: '',
					user_mobile: '',
					category_id: '',
					pay_way: '',
					prices: '',
					id_card: '',
					teacher:'',
					supplementary:''
				},
				agreementRules: {
					manager_name: [{ required: true, message: '必填项', trigger: 'blur' }],
					user_name: [{ required: true, message: '必填项', trigger: 'blur' }],
					user_mobile: [{ required: true, message: '必填项', trigger: 'blur' }],
					category_id: [{ required: true, message: '必填项', trigger: 'blur' }],
					pay_way: [{ required: true, message: '必填项', trigger: 'blur' }],
					prices: [{ required: true, message: '必填项', trigger: 'blur' }],
					teacher:[{ required: true, message: '必填项', trigger: 'blur' }]
				},
				searchForm: {
					user_phone: null,
					user_name: '',
					manager_name: '',
					category_id: '',
					is_signed: '',
					section: null,
					teacher:''
				},
				tableData: [],
				pagesTotal: 0,
				currPage: 1,
				isDisable: false
			}
		},
		created() {
			let that = this;	
			temRequest({
				url: '/getCategory',
				method: 'post',
				data: {}
			}).then(function(res) {
				that.selectOptions = res.data
			}).catch(function(err) {
				console.log(err)
			})
			that.searchSubmit()
		},
		methods: {
			getUrl(url){
				this.codeVisible = true;
				this.url = url;
			},
			format(data) {
				var d = new Date(data);
				return `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()}`;
			},
			// 当前点击页数
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.searchSubmit(val)
			},
			doCopy(e) {
				let that = this
				console.log(e)
				that.$copyText(e).then(function (e) {
					that.$message({
						type: 'success',
						message: '复制成功'
					})
				})
			},
			agreementSubmit(e) {
				let that = this
				that.isDisable = true
				that.$refs[e].validate((valid) => {
					if (!valid) {
						that.$message.error('请检查表单填写是否有误');
						that.isDisable = false
						return false;
					}
					if (that.selectDefault.length === 0) {
						that.$message.error('请选择商品分类');
						that.isDisable = false
						return false;
					}
					
					let {
						manager_name,
						user_name,
						user_mobile,
						pay_way,
						prices,
						id_card,
						supplementary,
						teacher
					} = that.agreementForm
					
					let temSelect = that.selectDefault
					
					temRequest({
						url: '/createProtocolContent',
						method: 'post',
						data: {
							manager_name, 
							user_name, 
							user_mobile, 
							pay_way, 
							prices, 
							id_card, 
							supplementary,
							teacher,
							category_id: temSelect[temSelect.length - 1]
						}
					}).then(function(res) {
						that.$message({
							type: 'success',
							message: '创建成功'
						})
						that.isDisable = false
						that.agreementForm = {
							manager_name: '',
							user_name: '',
							user_mobile: '',
							category_id: '',
							pay_way: '',
							prices: '',
							id_card: '',
							supplementary:'',
							teacher:'',
						}
						that.selectDefault = []
						that.centerDialogVisible = false
						that.searchSubmit()
					}).catch(function(err) {
						that.isDisable = false
						console.log(err)
					})
				})
			},
			searchSubmit(e=1) {
				let that = this
				let temSelect = that.selectDefault
				let category_id = ''
				let is_signed = ''
				let section = ''
				
				if (temSelect.length > 0) {
					category_id = temSelect[temSelect.length - 1]
				}
				if (that.searchForm.is_signed === '' || that.searchForm.is_signed === '3') {
					is_signed = ''
				} else {
					is_signed = that.searchForm.is_signed
				}
				
				that.currPage = e
				
				temRequest({
					url: '/protocolContentList',
					method: 'post',
					data: {
						manager_name: that.searchForm.manager_name, 
						teacher : that.searchForm.teacher,
						user_name: that.searchForm.user_name, 
						user_mobile: that.searchForm.user_phone ? that.searchForm.user_phone : '', 
						section: that.searchForm.section ? that.searchForm.section.join('/') : '', 
						is_signed: is_signed,
						category_id: category_id,
						page: that.currPage
					}
				}).then(function(res) {
					that.tableData = res.data.result
					that.pagesTotal = res.data.count
				})
			},
			closeDialog() {
				this.isDisable = false
			}
		}
	}
	</script>

	<style>
	.redcolor {
		color: red;
	}

	.greencolor {
		color: green;
	}

	.productagreement {
		position: absolute;
		top: 30px;
		right: 50px;
	}

	.el-select {
		width: 100%;
	}

	.codeimg {
		height: 800px;
	}

	.el-cascader {
		width: 100%;
	}
	.agreement-form{
		margin: 0 auto;
		width: 70%;
	}
	.page-box{
		margin-top: 40px;
		text-align: center;
	}
	.el-dialog__body{
		text-align: center!important;
	}
	</style>
